<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>测试 - layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="css/zhenjgy.css" />
  <link rel="stylesheet" href="css/flex.css" />
  <link rel="stylesheet" href="css/swiper-bundle.min.css" />
</head>

<body style="  height: 100vh;width: 100vw; background:  #02133B; ">
  <div class="container">
    <div class="top">
      一村九园可视化管理镇级平台
      <div class="top_right flex aj-c ml-12">
        <img src="/image/num_xc/home.png" alt="">
        <div class="ml-12">返回主页</div>
      </div>
    </div>
    <div class="box s-b">
      <div class="box_left" style="position: relative;">
        <!-- 顶部标题 -->
        <div class="aj-c">
          <div class="left_xzzc aj-c">果园销售量及销售额展示</div>
        </div>

        <!-- 果园销售量及销售额展示的echarts -->
        <div class="selecttimes  " style=" position: absolute; right: 35px;    top: 89px;z-index: 11;">
          <div class="select_box flex aj-c guoyuanxs">
            <div class="select_box_left" onclick="guoyuanxsselectTime()"></div>
            <div class="select_box_title guoyuanxs_payout aj-c line-clamp1" onclick="guoyuanxsselectTime()">官路西村</div>
            <div class="select_box_right" onclick="guoyuanxsselectTime()"></div>
          </div>
          <div class="guoyuanxsselecttimesChild"></div>
        </div>
        <div class="mt-30 ">
          <div class="xzzc_top_e">
          </div>
        </div>
        <!-- 果园支出分析 -->
        <div class="aj-c mt-31 mb-29 flex">
          <div class="left_xzzc aj-c">果园支出分析</div>
        </div>
        <!-- 果园支出分析echarts -->
        <div class="guoyuanzhic">
        </div>

        <!-- 果园生态环境监测 -->
        <div class="aj-c mt-27 mb-30 flex">
          <div class="left_xzzc aj-c">果园生态环境监测</div>


        </div>
        <div class="xzzc_bottom_e  mt-26  ">
          <div class="aj-c xzzc_bottom_e_top s-b ">
            <div class="staijianc_noactive aj-c  sthjtab  "> 水情 </div>
            <div class="staijianc_noactive aj-c  sthjtab"> 雨情 </div>
            <div class="staijianc_noactive aj-c  sthjtab "> 土壤</br>pH值</div>
            <div class="staijianc_noactive aj-c  sthjtab "> 温度</div>
          </div>
        </div>
        <!-- 果园生态环境监测echarts -->
        <div class="guoyuanhuanjjc mt-25">
        </div>
      </div>
      <div class="box_center">
        <!-- 地图区域 -->
        <div class="box_center_top  j-c s-b">
          <div class="s-b">
            <div class="box_center_top_box">
              <div class="box_center_top_left aj-c mb-30">
                <div class="">
                  <div class="aj-c num">186</div>
                  <div class="aj-c title">人口数量</div>
                </div>
              </div>
              <div class="box_center_top_left aj-c mb-30">
                <div class="">
                  <div class="aj-c num">186m²</div>
                  <div class="aj-c title">面积</div>
                </div>
              </div>
              <div class="box_center_top_left aj-c  mb-30">
                <div class="">
                  <div class="aj-c num">186w</div>
                  <div class="aj-c title">支出</div>
                </div>
              </div>
              <div class="box_center_top_left aj-c mb-30 ">
                <div class="">
                  <div class="aj-c num">186w</div>
                  <div class="aj-c title">收入</div>
                </div>
              </div>
            </div>
            <!-- 地图echarts -->
            <div class="maps">

            </div>
            <div class="box_center_top_box">
              <div class=" box_center_top_left1 aj-c mb-30">
                <div class="">
                  <div class="aj-c num">1503kg</div>
                  <div class="aj-c title">预计产量</div>
                </div>
              </div>
              <div class=" box_center_top_left1 aj-c mb-30">
                <div class="">
                  <div class="aj-c num">1.5w</div>
                  <div class="aj-c title">投入成本</div>
                </div>
              </div>
              <div class=" box_center_top_left1 aj-c mb-30">
                <div class="">
                  <div class="aj-c num">50w</div>
                  <div class="aj-c title">预计收益</div>
                </div>
              </div>
              <div class=" box_center_top_left1 aj-c  mb-30">
                <div class="">
                  <div class="aj-c num">200</div>
                  <div class="aj-c title">销售订单数</div>
                </div>
              </div>


            </div>
          </div>
          <!-- 地图echarts -->
        </div>
        <!-- 疫情区域 -->
        <div class="box_center_center mt-20 ">
          <div class=" j-c  mb-30  aj-c">
            <div class="left_xzzc aj-c">水果营收记录</div>
          </div>
          <div class="box_center_center_box mt-26 flex s-b">
            <div class="bsyq mr-40 flex">
              <div class="mt-30 mr-30">
                <div class="paim_title" style="text-align: center;">第二名</div>
                <div class="yibiaoban2"> </div>
              </div>
              <div class="mr-30">
                <div class="paim_title" style="text-align: center;color: #FF2654;">第一名</div>
                <div class="yibiaoban1"> </div>
              </div>
              <div class="mt-30">
                <div class="paim_title" style="text-align: center;color: #F9D354;">第三名</div>
                <div class="yibiaoban3"> </div>
              </div>
            </div>
            <div class=" yiqing s-b">
              <div class="boix-tab ">
                <div class="flex s-b h-38 w-295 boix-tab_active px-9">
                  <div class="aj-c">4</div>
                  <div class="aj-c">猕猴桃</div>
                  <div class="aj-c">50吨</div>
                  <div class="aj-c">32万</div>
                  <div class="aj-c">2022-04-12</div>
                </div>
                <div class="flex s-b h-38 w-295  px-9">
                  <div class="aj-c">4</div>
                  <div class="aj-c">猕猴桃</div>
                  <div class="aj-c">50吨</div>
                  <div class="aj-c">32万</div>
                  <div class="aj-c">2022-04-12</div>
                </div>
                <div class="flex s-b h-38 w-295 boix-tab_active px-9">
                  <div class="aj-c">4</div>
                  <div class="aj-c">猕猴桃</div>
                  <div class="aj-c">50吨</div>
                  <div class="aj-c">32万</div>
                  <div class="aj-c">2022-04-12</div>
                </div>
                <div class="flex s-b h-38 w-295  px-9">
                  <div class="aj-c">4</div>
                  <div class="aj-c">猕猴桃</div>
                  <div class="aj-c">50吨</div>
                  <div class="aj-c">32万</div>
                  <div class="aj-c">2022-04-12</div>
                </div>
                <div class="flex s-b h-38 w-295 boix-tab_active px-9">
                  <div class="aj-c">4</div>
                  <div class="aj-c">猕猴桃</div>
                  <div class="aj-c">50吨</div>
                  <div class="aj-c">32万</div>
                  <div class="aj-c">2022-04-12</div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <!-- tab切换区域 -->
        <div class="j-c ml-75">
          <div class="box_center_bottom_item flex">
            <div class="bottom_item_bg aj-c xc" onclick="tabs('xc')">数字乡村</div>
            <div class="bottom_item_bg aj-c gy" onclick="tabs('gy')">数字果园</div>
            <div class="bottom_item_bg aj-c cy" onclick="tabs('cy')">数字菜园</div>
          </div>
        </div>
      </div>
      <div class="box_right">
        <div class="aj-c">
          <div class="left_xzzc aj-c">果园水果产量统计</div>
        </div>
        <div class="f-end mt-30">
          <div class="selecttimes  " style="position: relative;">
            <div class="select_box flex aj-c " onclick="shuiguoclselectTime()">
              <div class="select_box_left"></div>
              <div class="select_box_title shuigcl_payout aj-c line-clamp1">官路西村</div>
              <div class="select_box_right"></div>
            </div>
            <div class="shuiguoclselecttimesChild"></div>
          </div>
        </div>
        <!-- 果园水果产量统计echarts -->
        <div class="box_right_top mt-24 s-b aj-c">
          <div class="ggecharts">

          </div>

        </div>
        <div class="aj-c mt-50">
          <div class="left_xzzc aj-c">果园种植产品面积占比</div>
        </div>

        <div class="box_right_top mt-69 s-b aj-c">

          <div class="box_right_top_quan aj-c">

          </div>
          <div class="box_right_top_list s-c-b">
            <div class="flex s-b  box_right_top_list_item  box_right_top_list_active">
              <div class="flex aj-c">
                <div class="border_id aj-c b-3-19A5F9"></div>
                <div class="yjtitle ml-8 mr-20 line-clamp1 ">猕猴桃</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">50㎡</div>
            </div>

            <div class="flex s-b  box_right_top_list_item">
              <div class="flex aj-c">
                <div class="border_id aj-c b-3-19A5F9"> </div>
                <div class="yjtitle ml-8 mr-20 line-clamp1">橙子</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">105㎡</div>
            </div>

            <div class="flex s-b  box_right_top_list_item">
              <div class="flex aj-c">
                <div class="border_id aj-c b-3-18B6F6"></div>
                <div class="yjtitle ml-8 mr-20 line-clamp1">橙子</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">150㎡</div>
            </div>
            <div class="flex s-b  box_right_top_list_item">
              <div class="flex aj-c">
                <div class="border_id aj-c b-3-19C7F1"></div>
                <div class="yjtitle ml-8 mr-20 line-clamp1">橙子</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">15㎡</div>
            </div>

            <div class="flex s-b  box_right_top_list_item">
              <div class="flex aj-c">
                <div class="border_id aj-c b-3-19E7EA"></div>
                <div class="yjtitle ml-8 mr-20 line-clamp1">橙子</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">10㎡</div>
            </div>
            <div class="flex s-b box_right_top_list_item ">
              <div class="flex aj-c">
                <div class="border_id aj-c b-3-1AFFE5"></div>
                <div class="yjtitle ml-8 mr-20 line-clamp1">橙子</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">150㎡</div>
            </div>
          </div>
        </div>




      </div>
    </div>
  </div>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/swiper-bundle.min.js"></script>
  <script src="js/flexible.js"></script>
  <script src="js/echarts.min.js"></script>
  <script type="text/javascript" src="js/echarts-gl.min.js"></script>
  <script type="text/javascript" src="js/geoCitys.js"></script>
  <script src="layui/layui.js"></script>
  <script src="js/zhenjigy.js"></script>
  <script>
    // 默认的果园销售量及销售额展示的下拉
    guoyuanxsname = '官路西村';
    // 果园生态环境监测的tab索引
    guoyuanindex = 0;
    //map的左侧的默认点击
    mapleftindex = 0;
    //map的右侧的默认点击
    maprightindex = '-1';
    // 地名下拉(全局使用)
    var selectindex = 0;
    // 果园水果产量统计
    guoyuansgclname = '官路西村';
    // 果园种植产品面积占比tab切换
    zhongzhicpindex = 0;

   
      document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c xc';
      document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c cy ';
      document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c gy box_center_bottom_item_active'
      // 果园销售量及销售额展示

      guoyuanzhic([130, 240, 230, 240, 1030])

      // 水果营收记录
      yibiaoban1();
      yibiaoban2();
      yibiaoban3();
      // 果园水果产量统计echarts 

   


    // ------------------------------------果园销售量及销售额展示----------------------------------------------
    document.getElementsByClassName('guoyuanxs_payout')[0].innerHTML = '官路西村'; 
    xzzc_top_e()

    // 点击右侧的
    function guoyuanxsselectTime() {
      selectindex++;
      if (selectindex == 1) {
        document.getElementsByClassName('guoyuanxsselecttimesChild')[0].innerHTML = ` 
        <div class=""    style="border: 0.1rem solid #00ceff;border-bottom:0; width: 5.8rem;position: absolute;z-index: 999;background-color: #02184A; "
             onclick="guoyuanxsselect_payout(event)">
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村1</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村2</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村3</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村4</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村</div>
        </div> 
      `
      } else {
        document.getElementsByClassName('guoyuanxsselecttimesChild')[0].innerHTML = ` `
        selectindex = 0;
      }
    }
    // 地区下拉选中
    function guoyuanxsselect_payout(e) {
      let changetime = e.target.outerText;//选择的下拉
      // 选中之后把下拉内容进行折叠
      document.getElementsByClassName('guoyuanxsselecttimesChild')[0].innerHTML = '';
      // 在渲染最终选择的下拉选项
      document.getElementsByClassName('guoyuanxs_payout')[0].innerHTML = changetime;
      selectindex = 0;
      guoyuanxsname = changetime;
      guoyuanxsrequest();
    }
    // 请求结果
    function guoyuanxsrequest() {
      xzzc_top_e()
    };

    // ----------------------------------------------果园生态环境监测----------------------------------------------

    document.getElementsByClassName('staijianc_noactive')[0].className = 'staijianc_noactive aj-c  sthjtab staijianc_active'
    guoyuansthj()
    $('.staijianc_noactive').click(function () {
      guoyuanindex = $(this).index();
      document.querySelectorAll('.staijianc_noactive').forEach(item => {
        item.className = 'staijianc_noactive aj-c  sthjtab'
      });
      document.querySelectorAll('.staijianc_noactive')[guoyuanindex].className = 'staijianc_noactive aj-c  sthjtab staijianc_active'
      guoyuansthj();
    })
    // 果园生态环境的请求发送
    function guoyuansthj() {
      switch (guoyuanindex) {
        case 0:
          guoyuanhuanjjc([230, 140, 260, 240, 1030])

          break;
        case 1:
          guoyuanhuanjjc([230, 240, 260, 240, 1030])

          break;
        case 2:
          guoyuanhuanjjc([230, 140, 360, 140, 1030])

          break;
        case 3:
          guoyuanhuanjjc([230, 440, 260, 240, 1030])

          break;
        default:
          break;
      }

    };
    //------------------------------------------ 果园水果产量统计-----------------------------

    document.getElementsByClassName('guoyuanxs_payout')[0].innerHTML = '官路西村';
    guoyuanxsrequest()

    // 点击右侧的
    function shuiguoclselectTime() {
      selectindex++;
      if (selectindex == 1) {
        document.getElementsByClassName('shuiguoclselecttimesChild')[0].innerHTML = ` 
        <div class=""    style="border: 0.1rem solid #00ceff;border-bottom:0; width: 5.8rem;position: absolute;z-index: 999;background-color: #02184A; "
             onclick="shuiguoclselect_payout(event)">
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村1</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村2</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村3</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村4</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村</div>
        </div> 
      `
      } else {
        document.getElementsByClassName('shuiguoclselecttimesChild')[0].innerHTML = ` `
        selectindex = 0;
      }
    }
    // 地区下拉选中
    function shuiguoclselect_payout(e) {
      let changetime = e.target.outerText;//选择的下拉
      // 选中之后把下拉内容进行折叠
      document.getElementsByClassName('shuiguoclselecttimesChild')[0].innerHTML = '';
      // 在渲染最终选择的下拉选项
      document.getElementsByClassName('shuigcl_payout')[0].innerHTML = changetime;
      selectindex = 0;
      guoyuansgclname = changetime;
      guoyuanxsrequest();
    }
    // 请求结果
    function guoyuanxsrequest() {
      ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [1222, 3344, 3790, 2349, 1654, 1230])

    };


    // -------------------------------------果园种植产品面积占比------------------------
    document.querySelectorAll('.box_right_top_list_item')[0].className = 'flex s-b flex s-b  box_right_top_list_item box_right_top_list_active';
    box_right_top_quan(0, document.querySelectorAll('.box_right_top_list_item').length, '迷糊桃', '11.0%', '-1');//点击的索引，一共的长度

    $('.box_right_top_list_item').click(function () {
      zhongzhicpindex = $(this).index();
      document.querySelectorAll('.box_right_top_list_item').forEach(item => {
        item.className = 'flex s-b flex s-b  box_right_top_list_item'
      })
      document.querySelectorAll('.box_right_top_list_item')[zhongzhicpindex].className = 'flex s-b flex s-b  box_right_top_list_item box_right_top_list_active';
      guoyuancpinmj();
    })
    function guoyuancpinmj() {
      box_right_top_quan(zhongzhicpindex, document.querySelectorAll('.box_right_top_list_item').length, '橙子', '11.0%', '-1');//点击的索引，一共的长度

    }
    // ----------------------------------------------地图区域-----------------------------------------------
    // 地图点击区域
    // 左边点击
    // 初始化地图点击
    document.querySelectorAll('.box_center_top_left')[0].className = ' box_center_top_left aj-c mb-30 box_center_top_left_active'
    mapsrequest();
    $('.box_center_top_left').click(function () {
      // 点击左边吧右边的清楚
      document.querySelectorAll('.box_center_top_left1').forEach((item, index, arr) => {
        console.log(item, 'udhfueiw')
        item.className = ' box_center_top_left1  aj-c mb-30'
      });
      maprightindex = '-1';
      mapleftindex = $(this).index();
      let arrdom = document.querySelectorAll('.box_center_top_left');
      arrdom.forEach((item, index, arr) => {
        item.className = ' box_center_top_left  aj-c mb-30'
      })
      arrdom[mapleftindex].className = 'box_center_top_left aj-c mb-30 box_center_top_left_active';
      mapsrequest()

    });
    // 右边点击
    $('.box_center_top_left1').click(function () {
      // 点击右边吧左边的清楚 
      document.querySelectorAll('.box_center_top_left').forEach((item, index, arr) => {
        console.log(item, 'udhfueiw')
        item.className = ' box_center_top_left  aj-c mb-30'
      })
      mapleftindex = '-1';
      maprightindex = $(this).index();
      let arrdom = document.querySelectorAll('.box_center_top_left1');
      arrdom.forEach((item, index, arr) => {
        console.log(item, 'udhfueiw')
        item.className = ' box_center_top_left1  aj-c mb-30'
      });

      arrdom[maprightindex].className = 'box_center_top_left1 aj-c mb-30 box_center_top_left_active';
      mapsrequest()

    });
    function mapsrequest() {
      let indexnums = maprightindex == '-1' ? mapleftindex : maprightindex;
      maps()
    }
    //  ----------------------------------------------
    function tabs(value) {
      switch (value) {
        case 'cy':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c cy box_center_bottom_item_active';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c gy '
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c xc'
          // window.location.href = './zhenjicy.html'
          top.location = './zhenjicy.html'

          break;
        case 'gy':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c cy  ';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c gy box_center_bottom_item_active'
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c xc'
          // window.location.href = './zhenjigy.html'
          top.location = './zhenjigy.html'
          break;
        case 'xc':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c cy ';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c gy '
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c xc box_center_bottom_item_active'
          // window.location.href = './zhenjixc.html'
          top.location = './zhenjixc.html'
          break;

        default:
          break;
      }
    }

    // var afyjList = document.querySelectorAll('.box_right_top_list_item')
    // afyjList.forEach((i, index1, arr) => {
    //   i.onclick = (e) => {
    //     i.className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active'
    //     console.log(i, 'i')
    //   }
    // }); 
  </script>



  <!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->


  <!-- 先引入jquery -->

  <script>
    var swiper = new Swiper(".mySwiper", {
      watchSlidesProgress: true,
      slidesPerView: 3,
    });
  </script>

</body>

</html>